<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>event API</title>
</head>
<body>
  <div id="red" style="width: 100%; height: 200px; background-color: lightcoral; position: relative;">
    父元素
    <div id="blue" style="width: 50%; height: 100px; background-color: lightblue;
     position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">子元素</div>
  </div>
  <div id="scroll" style="margin-top: 30px; width: 100px; height: 100px; border: 1px solid black;
    overflow-y: auto;">
    测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本
  </div>
  <div id="range">
    <p>第一行第一行第一行第一行第一行第一行</p>
    <p>第二行第二行第二行第二行第二行第二行</p>
    <p>第三行第三行第三行第三行第三行第三行</p>
  </div>
  <button onclick="reverseList()">翻转</button>
</body>

<script>
  alert('打开控制台，查看元素点击后的效果')

  var red = document.getElementById('red');
  var blue = document.getElementById('blue');
  var scr = document.getElementById('scroll');
  var rangeEle = document.getElementById('range')

  red.addEventListener('click', function() {
    console.log('父元素被点击')
  }, {
    capture: true,
    once: true
  })

  blue.addEventListener('click', function() {
    console.log('子元素被点击');
  })

  red.addEventListener('click', function() {
    console.log('父元素被点击2')
  })

  blue.addEventListener('click', function() {
    console.log('子元素被点击2')
  })

  scr.addEventListener('scroll', function() {
    console.log('scroll')
  }, { passive: true })

  rangeEle.addEventListener('mouseup', function(e) {
    var selectText = document.getSelection().toString()
    var range = document.getSelection().getRangeAt(0)
    console.log(selectText, range)
  })

  function reverseList () {
    const list = document.getElementById('range')
    const range = new Range()
    range.selectNodeContents(list)

    let fragment = range.extractContents()
    let l = fragment.childNodes.length
    while(l-- > 0) {
        fragment.appendChild(fragment.childNodes[l]) // 因为 fragment也是一个living collection，所以可以直接往后添加前面的元素，会把元素直接后置
    }

    list.appendChild(fragment)
  }
</script>
</html>